<template>
  <div>
    <tou></tou>
    <el-card class="box-card">
      <div class="box">
        <span>{{ list.product_name }}</span>
        <ul>
          <li>概述</li>
          <li>参数</li>
          <li>用户评价</li>
        </ul>
      </div>
    </el-card>
    <div class="box2">
      <div class="zuo">
        <el-carousel height="800px">
          <el-carousel-item v-for="(item, index) in banner" :key="index">
            <img
              :src="'http://106.15.179.105:3000/' + item.product_picture"
              alt=""
              style="height: 800px; width: 100%"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="you">
        <h2>{{ list.product_name }}</h2>
        <p class="p1">{{ list.product_intro }}</p>
        <p class="p2">小米自营</p>
        <p class="p3">
          <span class="span">{{ list.product_selling_price }}元</span>
          <del class="del">{{ list.product_price }}元</del>
        </p>
        <el-divider></el-divider>
        <el-card class="box-card">
          <p class="p1">
            <span class="aa">{{ list.product_name }}</span>
            <span>
              <span class="span">{{ list.product_selling_price }}元</span>
              <del class="del">{{ list.product_price }}元</del></span
            >
          </p>
          <p class="p2">总计:{{ list.product_selling_price }}</p>
        </el-card>
        <div class="bo">
          <el-button
            style="width: 200px; height: 70px"
            type="warning"
            size="medium"
            @click="add(list)"
            >加入购物车</el-button
          >
          <el-button style="width: 200px; height: 70px" type="info"
            >喜欢</el-button
          >
        </div>
      </div>
    </div>
    <fot></fot>
  </div>
</template>

<script>
import tou from '@/components/header.vue'
import fot from '@/components/footer.vue'
import { getDetailsPicture, getDetails, addShoppingCart } from '@/api/login.js'
export default {
  components: { tou, fot },

  data() {
    return {
      id: 0,
      banner: [],
      list: [],
    }
  },
  mounted() {
    this.id = this.$route.query.productID
    getDetailsPicture({ productID: this.id }).then((res) => {
      // console.log(res.data.ProductPicture)
      this.banner = res.data.ProductPicture
    })
    getDetails({ productID: this.id }).then((res) => {
      console.log(res.data.Product[0], 'aa')
      this.list = res.data.Product[0]
    })
  },
  methods: {
    add(list) {
      console.log(list)
      addShoppingCart({ user_id: 6353, product_id: list.product_id }).then(
        (res) => {
          this.$notify({
            title: '成功',
            message: res.data.msg,
            type: 'success',
          })
        },
      )
    },
  },
  computed: {},
  watch: {},
}
</script>

<style scoped lang="scss">
.box-card {
  width: 100%;
  .box {
    width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    ul {
      list-style: none;
      display: flex;
      li {
        margin: 0px 4px;
      }
      li:hover {
        color: #ff6700;
        cursor: pointer;
      }
    }
  }
}
.box2 {
  width: 1400px;
  margin: 0 auto;
  display: flex;
  .zuo {
    width: 50%;
    height: 800px;
  }
  .you {
    padding: 20px;
    .p1 {
      color: #ccc;
      margin: 20px 0px;
    }
    .p2 {
      color: #ff6700;
      margin: 20px 0px;
    }
    .p3 {
      span {
        font-size: 18px;
        color: #ff6700;
      }
      del {
        color: #ccc;
      }
    }
    .box-card {
      padding: 30px;
      .p1 {
        display: flex;
        justify-content: space-between;
        span {
          color: #000;
        }
        .span {
          font-size: 18px;
          color: #ff6700;
        }
        del {
          color: #ccc;
        }
      }
    }
    .bo {
      margin: 20px 0px;
    }
  }
}
</style>
